<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无人超市-商品管理</title>
    <!--引入axios-->
    <script src="js/axios.min.js"></script>
    <!-- 引入vue -->
    <script src="js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="element_ui/index.js"></script>
    <script src="js/quagga/quagga.min.js"></script>
    <link rel="stylesheet" href="element_ui/index.css">
    <style>
        .el-header {
            height: 10vh;
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 10vh;
        }
        .txt {
            line-height: 24px;
            padding: 0 9px;
            box-sizing: border-box;
        }

        .el-aside {
            background-color: #D3DCE6;
            color: #333;
            text-align: center;
            line-height: 100%;
            height: 100%;
        }

        .el-main {
            height: 90vh;
            overflow-x: hidden;
            overflow-y: scroll;
        }

        body > .el-container {
            margin-bottom: 40px;
        }

        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }

        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }

        .el-menu {
            height: 90vh;
        }
    </style>
</head>
<body style="margin: 0;">
<div id="app">
    <el-container>
        <el-header>无人超市-管理页面</el-header>
        <el-container>
            <el-aside width="15%">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo">
                    <el-menu-item index="1" @click="GoodsWarehousing">
                        <i class="el-icon-full-screen"></i>
                        <span slot="title">扫码入库</span>
                    </el-menu-item>
                    <el-menu-item index="2" @click="ProductManagement">
                        <i class="el-icon-menu"></i>
                        <span slot="title">商品管理</span>
                    </el-menu-item>
<!--                    <el-menu-item index="3" disabled>-->
<!--                        <i class="el-icon-document"></i>-->
<!--                        <span slot="title">数据报表</span>-->
<!--                    </el-menu-item>-->
<!--                    <el-menu-item index="4" disabled>-->
<!--                        <i class="el-icon-setting"></i>-->
<!--                        <span slot="title">会员管理</span>-->
<!--                    </el-menu-item>-->
                </el-menu>
            </el-aside>
            <el-main>
                <div v-show="isGoodsWarehousing">
                    <div style="float:left; width: 48%;">
                        <el-form ref="productForm" label-position="left" :inline="true" :model="productForm"
                                 :rules="sub1Rules" label-width="80px">
                            <el-form-item label="商品名称">
                                <el-input v-model="productForm.productName" :disabled="productFormDisabled"
                                          autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="商品类目">
                                <el-input v-model="productForm.productItem" :disabled="productFormDisabled"
                                          autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="品牌名称">
                                <el-input v-model="productForm.brand" :disabled="productFormDisabled"></el-input>
                            </el-form-item>
                            <el-form-item label="公司名称">
                                <el-input v-model="productForm.company" :disabled="productFormDisabled"></el-input>
                            </el-form-item>
                            <el-form-item label="商品规格">
                                <el-input v-model="productForm.spec" :disabled="productFormDisabled"></el-input>
                            </el-form-item>
                            <el-form-item label="原产国">
                                <el-input v-model="productForm.originCountry" :disabled="productFormDisabled"></el-input>
                            </el-form-item>
                            <el-form-item
                                    label="库存"
                                    prop="reserve">
                                <el-input v-model.number="productForm.reserve" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item
                                    label="进价"
                                    prop="priceB">
                                <el-input v-model="productForm.priceB" autocomplete="off" :disabled="productFormDisabled"></el-input>
                            </el-form-item>
                            <el-form-item
                                    label="售价"
                                    prop="priceA">
                                <el-input
                                        v-model="productForm.priceA"
                                        autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item
                                    label="会员价"
                                    prop="priceD">
                                <el-input v-model="productForm.priceD" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="备注信息" prop="productNote">
                                <el-input type="textarea" v-model="productForm.productNote"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="productSubmit">商品入库</el-button>
                                <el-button @click="QuaggaStop">关闭扫码</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div style="width: 50%;float: right;">
                        <div id="canvanCode"></div>
                    </div>
                </div>
                <div v-show="isProductManagement">
                    <div>
                        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
                            <el-form-item label="商品名">
                                <el-autocomplete
                                        class="inline-input"
                                        v-model="queryForm.queryProductName"
                                        :fetch-suggestions="productNameLoad"
                                        placeholder="请输入商品"
                                ></el-autocomplete>
                            </el-form-item>
                            <el-form-item label="品牌名">
                                <el-autocomplete
                                        class="inline-input"
                                        v-model="queryForm.queryBrand"
                                        :fetch-suggestions="productBrandLoad"
                                        placeholder="请输入品牌"
                                ></el-autocomplete>
                            </el-form-item>
                            <el-form-item label="公司名">
                                <el-autocomplete
                                        class="inline-input"
                                        v-model="queryForm.queryCompany"
                                        :fetch-suggestions="productCompanyLoad"
                                        placeholder="请输入公司"
                                ></el-autocomplete>
                            </el-form-item>
                            <el-form-item label="商品类目">
                                <el-autocomplete
                                        class="inline-input"
                                        v-model="queryForm.queryProductItem"
                                        :fetch-suggestions="productOriginCountryLoad"
                                        placeholder="请输入商品类目"
                                ></el-autocomplete>
                            </el-form-item>
                            <el-row>
                            <el-form-item label="库存">
                                <div class="block" style="width: 20vh">
                                    <el-slider
                                            v-model="queryForm.queryReserve"
                                            range
                                            :max="maxReserve">
                                    </el-slider>
                                </div>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmitQuery">查询</el-button>
                            </el-form-item>
                            </el-row>
                        </el-form>
                    </div>
                    <template>
                        <el-table
                                :data="productTableData"
                                style="width: 100%;height: 55vh;"
                                @cell-click="handleCellClick">
                            <el-table-column
                                    prop="barcode"
                                    label="商品码"
                                    width="150">
                            </el-table-column>
                            <el-table-column
                                    prop="productName"
                                    label="商品名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="productItem"
                                    label="商品类目"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="brand"
                                    label="品牌名"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="company"
                                    label="公司名"
                                    width="180">
                            </el-table-column>
                            <el-table-column
                                    prop="spec"
                                    label="规格"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="originCountry"
                                    label="原产国"
                                    width="120">
                            </el-table-column>
                            <el-table-column
                                    prop="priceB"
                                    label="进价/元"
                                    width="90"
                                    :formatter="formatNumber">
                            </el-table-column>
                            <el-table-column
                                    prop="priceA"
                                    label="售价/元"
                                    width="90"
                                    :formatter="formatNumber">
                            </el-table-column>
                            <el-table-column
                                    prop="priceD"
                                    label="优惠价/元"
                                    width="90"
                                    :formatter="formatNumber">
                            </el-table-column>
                            <el-table-column
                                    prop="reserve"
                                    label="库存"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    prop="productNote"
                                    label="备注"
                                    width="140">
                            </el-table-column>
                        </el-table>
                        <!--    分页功能-->
                        <el-pagination
                                background
                                layout="prev, pager, next"
                                :page-size="5"
                                :total="PagingTotal"
                                :current-page.sync="currentPage"
                                @current-change="currentChange">
                        </el-pagination>
                    </template>
                </div>
            </el-main>
        </el-container>
    </el-container>
    <!--    商品信息修改窗口-->
    <el-dialog title="商品信息修改" :visible.sync="modifyWindowVisible" width="70%">
        <el-form :inline="true" label-position="top" :model="updateInfoForm">
            <el-form-item label="商品码" label-width="30%">
                <el-input v-model="updateInfoForm.barcode" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="商品名" label-width="30%">
                <el-input v-model="updateInfoForm.productName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="商品类目" label-width="30%">
                <el-input v-model="updateInfoForm.productItem" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="品牌名" label-width="30%">
                <el-input v-model="updateInfoForm.brand" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司名" label-width="30%">
                <el-input v-model="updateInfoForm.company" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="规格" label-width="30%">
                <el-input v-model="updateInfoForm.spec" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="原产国" label-width="30%">
                <el-input v-model="updateInfoForm.originCountry" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="进价/分" label-width="30%">
                <el-input v-model="updateInfoForm.priceB" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="售价/分" label-width="30%">
                <el-input v-model.number="updateInfoForm.priceA" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="优惠价/分" label-width="30%">
                <el-input v-model.number="updateInfoForm.priceD" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="库存" label-width="30%">
                <el-input v-model="updateInfoForm.reserve" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="30%">
                <el-input v-model="updateInfoForm.productNote" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="danger" @click="removeWindowSubmit">删 除</el-button>
            <el-button @click="modifyWindowVisible = false">取 消</el-button>
            <el-button type="primary" @click="modifyWindowSubmit">确 定</el-button>
        </div>
    </el-dialog>
    <audio ref="audio" src="mp3/扫描成功.mp3" autoplay></audio>
</div>
</body>
<script src="js/ProductManag.js"></script>
</html>
